<template>
  <div class="">
    <div class="top">
      <div class="label">标题：</div>
      <el-input v-model="condition.colName"
                placeholder="请输入标题"></el-input>
      <el-button size="small"
                 type="primary"
                 @click="getColumnInfoList">查询</el-button>
      <el-button size="small"
                 type="info"
                 plain
                 @click="reset">重置</el-button>
    </div>
    <div class="table">
      <el-table :height="'calc(100% - 60px)'"
                :data="tableData"
                :header-cell-style="{background:'#F8F9FA'}">
        <el-table-column prop="date"
                         label="序号">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="colName"
                         label="栏目名称"> </el-table-column>
        <el-table-column label="导航显示"
                         v-if="false"
                         prop="isNavigation">
          <template slot-scope="scoped">
            <el-switch active-color="#1891FF"
                       inactive-color="#D2D2D2"
                       active-value="1"
                       inactive-value="0"
                       v-model="scoped.row.isNavigation"
                       :disabled="scoped.row.isNavigationChangeable == '0'"
                       @change="changeStatus($event,scoped.row)"
                       v-if="scoped.row.parentId==0">

            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text"
                       style="color: #1891FF;margin-left: -5px"
                       @click="goEdit(scope.row)">编辑</el-button>
            <el-button type="text"
                       style="color: #F31C11"
                       @click="goDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: ['node'],
  data() {
    return {
      tableData: [],
      parentNode: {},
      dialogVisible: false,
      condition: {
        colName: '',
        page: 0,
        pageSize: 99,
        parentId: '0',
      },
      options:[],
    }
  },
  methods: {
    getUserForReviewer() {
      this.$api.getUserForReviewer().then((res) => {
        this.options = res.data
      })
    },
    getColumnInfoList() {
      this.$api.getColumnInfoList(this.condition).then((res) => {
        this.tableData = res.data.data
      })
    },
    goEdit(row) {
      // if (row.isEditable == '0') {
      //   this.$message.warning('该栏目不可操作')
      //   return
      // }
      console.log(row)
      this.$parent.dialogVisible = true
      this.$parent.form = { ...row }
      if (row.firstReviewer) {
        let arr = []
        row.firstReviewer.split(',').map((item) => {
          this.options.forEach(item1=>{
            if(item1.id===item * 1){
              arr.push(item * 1)
            }
          })
        })
        this.$parent.firstReviewer = arr
      }
      if (row.secondReviewer) {
        let arr = []
        row.secondReviewer.split(',').map((item) => {
          this.options.forEach(item1=>{
            if(item1.id===item * 1){
              arr.push(item * 1)
            }
          })
        })
        this.$parent.secondReviewer = arr
      }
    },
    goDelete(row) {
      if (row.isEditable == '0') {
        this.$message.warning('该栏目不可操作')
        return
      }
      this.$confirm('此操作将删除该栏目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
      }).then(async () => {
        let params = { columnId: row.id }
        let res = await this.$api.deleteColumnInfo(params)
        if (res.code == 200) {
          this.$message.success('删除成功!')
          this.getColumnInfoList()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    changeStatus(e, row) {
      let params = { columnId: row.id, isNavigation: e }
      this.$api.updateColumnInfoNavigation(params).then((res) => {
        this.$message.success(res.message)
      })
    },
    reset() {
      this.condition.colName = ''
      this.getColumnInfoList()
    },
  },
  watch: {
    node: {
      handler(newVal, oldVal) {
        if (newVal.subLanMu == null || newVal.subLanMu.length == 0) return
        this.condition.parentId = newVal.id
        this.getColumnInfoList()
      },
      deep: true,
    },
  },

  mounted() {
    this.getColumnInfoList()
    this.getUserForReviewer()
  },
}
</script>

<style scoped lang="less">
.top {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  .el-input {
    width: 200px;
    margin-right: 10px;
  }
  .label {
    width: 40px;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
  }
}
.table {
  height: 100%;
}
.noBack {
  background: transparent;
  border: none;
}
/deep/.el-button--primary.is-plain:focus,
.el-button--primary.is-plain:hover {
  background: transparent !important;
  border-color: transparent !important;
  color: lightblue;
}
/deep/.el-button--danger.is-plain:focus,
.el-button--danger.is-plain:hover {
  background: transparent !important;
  border-color: transparent !important;
  color: pink;
}
/deep/ .btn {
  margin-left: -22px !important;
}
</style>
